<template>
  <div id="soon-movie">
    <div class="hot-wrapper" ref="picWrapper">
      <ul ref="movieWrapper">
        <li v-for="item in soonList" class="movie-item">
          <div class="movie-img"><img :src="item.images.medium"></div>
          <div class="movie-title">{{item.title}}</div>
          <div class="movie-average">{{item.rating.average==0?'暂无评分':item.rating.average}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable  */
  import BScroll from 'better-scroll'
  export default{
    data () {
      return {
        soonList: [],
        url: 'coming_soon',
        count: '7'
      }
    },
    mounted () {
      this.$nextTick(() => {
          this._initData()
          this._initPics()
      })
    },
    methods: {
      _initPics () {
        this.$refs.movieWrapper.style.width = '805px'
        this.$nextTick(() => {
            this.picScroll = new BScroll(this.$refs.picWrapper, {
            scrollX: true,
            eventPassthrough: 'vertical'
          })
        })
      },
      _initData () {
        this.$http.jsonp('https://api.douban.com/v2/movie/' + this.url + '?count=' + this.count ).then(res => {
          this.soonList = res.data.subjects
        }).catch(e => {
            console.log(e)
        })
      }
    }
  }
</script>
<style>
  #soon-movie .movie-img{width: 100px; height: 140px;}
  #soon-movie .movie-img img{width: 100%; height: 100%;}
  #soon-movie .movie-item{display: inline-block;width: 100px;margin-right: 15px;}
  #soon-movie .hot-wrapper{width: 100%;overflow: hidden;}
  #soon-movie .movie-title{font-size: 14px;width: 100px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding: 8px 0;}
</style>
